<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表格</title>
        <style type="text/css">
            h3 { text-align: center ; }
            .tab { border: 1px solid blue ; border-collapse: collapse ; margin: auto ; }
            .tab tr td { border: 1px solid blue ; height: 100px ; width: 200px ; text-align: center ; vertical-align: center ; }
        </style>
    </head>

    <!-- 格式化页面代码可以使用 shift + alt + f 快捷键 -->
    <body>

        <h3>合并单元格 ( 使用 colspan 属性合并同一行的多个相邻的单元格)</h3>

        <table class="tab">
            <tr>
                <td colspan="4">hello</td>
                <!-- 
                <td>hello</td>
                <td>hello</td>
                <td>hello</td> 
                -->
            </tr>
            <tr>
                <td colspan="2">hello</td>
                <!-- <td>hello</td> -->
                <td>hello</td>
                <td>hello</td>
            </tr>
            <tr>
                <td>hello</td>
                <td>hello</td>
                <td colspan="2">hello</td>
                <!-- <td>hello</td> -->
            </tr>
        </table>

    </body>

</html>